// import React, { useState } from 'react';
// import "./access.css"

// import { Button, Table, Space } from 'antd';
// import { FilterFilled, DeleteFilled, PlusCircleFilled, RightSquareFilled } from '@ant-design/icons';

// export default function Access() {

//   const [index, setIndex] = useState(0);
//   const [size, setSize] = useState('large');

//   const columns = [
//     {
//       title: 'Name',
//       dataIndex: 'name',
//       width: 150,
//     },
//     {
//       title: 'Age',
//       dataIndex: 'age',
//       width: 150,
//     },
//     {
//       title: 'Address',
//       dataIndex: 'address',
//     },
//   ];

//   const data = [];
//   for (let i = 0; i < 100; i++) {
//     data.push({
//       key: i,
//       name: `Edward King ${i}`,
//       age: 32,
//       address: `London, Park Lane no. ${i}`,
//     });
//   }



//   const navClick = (data) => {
//     // e.preventDefault();
//     setIndex(data);
//     console.log(index, "选中的角标");
//   }

// // 表格的相关事件





//   return (
//     <div className='access-pages'>
//       <nav className='access-page-nav'>
//         <div class={index == 0 ? 'className2' : 'access-page-nav-options'} onClick={navClick.bind(this, 0)} >Team Management</div>
//         <div class={index == 1 ? 'className2' : 'access-page-nav-options'} onClick={navClick.bind(this, 1)} >User Management</div>
//       </nav>

//       <div className="table-box">
//         <header className='access-table-header'>
//           <div className='access-table-header-tit'>Team Management</div>
//           <div>

//             <Button type="default" icon={<FilterFilled />} size={size} >Filter</Button>

//             <Button type="default" icon={<RightSquareFilled />} size={size} >Export</Button>

//             <Button type="default" icon={<PlusCircleFilled />} size={size} >Add</Button>

//             <Button type="default" className='deleteBtn' icon={<DeleteFilled />} size={size} >Delete</Button>
//           </div>

//         </header>

//         <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 610 }} />
//       </div>

//     </div>
//   )
// }



import { Table } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

class App extends React.Component {
  state = {
    selectedRowKeys: [], // Check here to configure the default column
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
      selections: [
        Table.SELECTION_ALL,
        Table.SELECTION_INVERT,
        Table.SELECTION_NONE,
        {
          key: 'odd',
          text: 'Select Odd Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return false;
              }
              return true;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
        {
          key: 'even',
          text: 'Select Even Row',
          onSelect: changableRowKeys => {
            let newSelectedRowKeys = [];
            newSelectedRowKeys = changableRowKeys.filter((key, index) => {
              if (index % 2 !== 0) {
                return true;
              }
              return false;
            });
            this.setState({ selectedRowKeys: newSelectedRowKeys });
          },
        },
      ],
    };
    return <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
  }
}

export default App;